<template>
	<view class="cu-modal" @tap="closeModel" :class="tempShowModel==true?'show':''">
		<view class="cu-dialog bg-black" @tap.stop="()=>{}" style="height: 70vh;">
			
			<!-- 标题 begin -->
			<view @tap.stop="()=>{}" class="cu-bar bg-black justify-end">
				<view class="content">{{now}}/{{images.length}}</view>
				<view class="action" @tap="closeWin">
					<text class="cuIcon-roundclose text-white"></text>
				</view>
			</view>
			<!-- 标题 end -->
			
			<!-- 内容 begin -->
			<view @tap.stop="()=>{}" class="flex align-center" style="height: 80%;">
				<swiper @change="change" style="height:65%;width: 100%;" v-if="tempShowModel" :circular="true" :current="imageIndex" class="screen-swiper square-dot" :indicator-dots="true">
					<swiper-item :data-url="item" v-for="(item,index) in _images" :key="index">
						<movable-area scale-area>
							<movable-view direction="none" @scale="onScale" scale="true" scale-min="1" scale-max="4" :scale-value="scale">
								<image :src="item" mode="aspectFit"></image>
							</movable-view>
						</movable-area>
					</swiper-item>
				</swiper>
			</view>
			<!-- 内容 end -->
			
			<!-- 底部 begin -->
			<view @tap.stop="()=>{}" class="padding-left align-center flex justify-start" v-if="isOneWriter">
				<image v-if="avatar" :src="avatar" style="width:25px;height:25px;border-radius: 50%;"></image>
				<text class="margin-left-sm">{{title}}</text>
			</view>
			<view @tap.stop="()=>{}" class="padding-left align-center flex justify-start" v-else>
				<image :src="info[now-1].avatar" style="width:25px;height:25px;border-radius: 50%;"></image>
				<text class="margin-left-sm">{{info[now-1].title}}</text>
				<text class="margin-left-sm">{{info[now-1].type==0?'官方图片':'评论图片'}}</text>
			</view>
			<!-- 底部 end -->
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 tempShowModel:false,
				 infoTitle:"",
				 now:1,
				 _images:[],
				 info:[]
			};
		},
		name: 'image-view',
		props: {
			showModel: {
				type: [Boolean, String],
				default: false
			},
			imageIndex: {
				type: Number,
				default: 0
			},
			title: {
				type: String,
				default: ""
			},
			avatar:{
				type:String,
				default:""
			},
			images: {
				type: Array,
				default: []
			},
			isOneWriter:{
				type:Boolean,
				default:true
			}
		},
		watch:{
			showModel(val){
				if(val==true){					
					this.tempShowModel=val
					wx.enableAlertBeforeUnload({
						message:"您要退出图片预览吗?"
					})
				}else{					
					this.closeWin()
					wx.disableAlertBeforeUnload()
				}
			},
			images(images){
				if(this.isOneWriter){
					this._images=images
				}else{
					let res=[]
					let info=[]
					images.forEach((item)=>{
						res.push(item.image)
						info.push({id:item.id,type:item.type,title:item.name,avatar:item.avatar})
					})
					
					this._images=res
					this.info=info
				}
			},
			imageIndex(val){
				this.now=this.imageIndex+1
			}
		},
		created() {
			this.tempShowModel=this.showModel
			this.now=this.imageIndex+1			
			if(this.isOneWriter){
				this._images=this.images
			}
			
			wx.disableAlertBeforeUnload()
		},
		methods: {
			change(e){
				this.now=e.target.current+1
			},
			closeWin(){
				this.tempShowModel=false
				this.$nextTick(()=>{
					this.$emit("closeWin")
				})
			},
			closeModel(){
				this.closeWin()
			},
			onScale(event){
				event.stopPropagation()
			}
			//数据操作类-------------------------
		}
	}
</script>

<style scoped>
	movable-view {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height:100%;
	}
	movable-area {
		height: 100%;
		width: 100%;
		position:fixed;
		overflow: hidden;
	}
	movable-view image{
		width:100%;
	}
</style>